<template>
    <div class='card-leader' v-bind:style="{width:width}">
        <div class='card-inner'>
            <div class='personTotal clearfix' :class="{'backLeader' : type!=='leader'}">
                <div class='lf personInfo'>
                    <h3 class='name ellipsis' :title="personInfo.name">{{personInfo.name}}</h3>
                    <p class="job" :title="personInfo.c_current_job">{{personInfo.c_current_job}}</p>
                    <ul class="width-nochange">
                        <li class="ellipsis" :title="personInfo.birthdate"><i class="fa fa-birthday-cake" aria-hidden="true"></i>出生日期 : {{personInfo.birthdate && personInfo.birthdate.split(' ')[0]}}<span v-if="personInfo.birthdate && personInfo.birthdate.trim()">({{personInfo.birthdate | calculateAge}}岁)</span></li> 
                        <li class="ellipsis" :title="personInfo.c_leader_ident"><i class="iconfont" ></i>国&nbsp;&nbsp;籍 : {{personInfo.c_leader_ident}}</li>
                        <li class="ellipsis" :title="personInfo.political_sta_chn"><i class="iconfont" ></i>政治面貌 : {{personInfo.political_sta_chn}}</li>
                        <li class="backwork" v-if="type!=='leader'" :title="personInfo.c_retire_end_dt && personInfo.c_retire_end_dt.split(' ')[0]"><i class="fa fa-calendar" ></i>返聘时间 :{{personInfo.c_retire_bgn_dt && personInfo.c_retire_bgn_dt.split(' ')[0]}} 至 {{personInfo.c_retire_end_dt &&  personInfo.c_retire_end_dt.split(' ')[0]}}</li>
                    </ul>
                </div>
                <div class='lf personImg'>
                    <img :src="srcImg" class='cardPhoto' alt="">
                </div>
            </div>
            <div class="btnArea">          
                <a class="btn btn-leaderInfo" v-if="hideLeader1" target="_blank" @click="goResumeUrl">
                    <i class="fa fa-file-pdf-o"></i> 干部任免审批表
                </a>
                <a class="btn btn-leaderSalary" @click="salaryDetail" v-if="hidePay1" data-replace-inner="#modal1" data-spin="true" data-modal="#modal1">
                    <i class="fa fa-jpy"></i> 薪酬信息
                </a>                            
            </div>

        </div>
        <el-dialog
            :title="title"
            size="small"
            :visible.sync="dialogTableVisible"
            :lock-scroll='lockGao'>
                <div class="box-body">
                    <table class="table table-bordered">  
                        <tbody>
                            <tr>
                                <td rowspan="2">年度</td>
                                <td rowspan="2">姓名</td>
                                <td rowspan="2">薪级</td>
                                <td rowspan="2">在岗天数</td>
                                <td rowspan="2">岗位工资/月</td>
                                <td rowspan="2">岗位工资/年</td>
                                <td rowspan="2">辅助工资</td>
                                <td colspan="2">效绩奖金</td>
                                <td colspan="2">年收入</td>
                                <td rowspan="2">货币单位</td>     
                            </tr>
                            <tr>
                                <td>年度奖金</td>
                                <td>延递奖金</td>
                                <td>当期收入</td>
                                <td>权责合计</td>
                            </tr>
                            <template v-if="gridData.length>0">
                                <tr class="bbq"  v-for="data in gridData">
                                    <td v-for="item in items">{{data[item]}}</td>
                                </tr>
                            </template>

                            <tr class="bbq" v-else>
                                <td colspan="13">暂无数据</td>
                            </tr>
                            </tbody>
                    </table>
                    <div>
                        <span style="margin-top:10px;display:block" >注&nbsp:&nbsp目标值根据个人岗位关系树核算,&nbsp不含KPI考核,&nbsp二次分配等元素的影响</span>
                    </div>
                </div>
                <!-- <div class="salaryRecord">
                    <h3>近半年发薪记录</h3>
                    <el-table :data="gridData1" fit='true'>
                        <el-table-column property="date" label="发薪期间" width="80"></el-table-column>
                        <el-table-column property="name" label="发薪类型" width="80"></el-table-column>
                        <el-table-column property="address" label="收入合计	" width="80"></el-table-column>
                        <el-table-column property="address" label="扣减合计" width="80"></el-table-column>
                        <el-table-column property="address" label="实发工资"></el-table-column>
                        <el-table-column property="address" label="公司承担社保/MPF"></el-table-column>
                        <el-table-column property="address" label="人工成本合计"></el-table-column>
                        <el-table-column property="address" label="货币代码"></el-table-column> 
                    </el-table>
                </div> -->

        </el-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import { Table, TableColumn, Dialog } from 'element-ui'
import { _encode} from '@/common/js/handleCode'
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Dialog)
export default {
	data () {
		return {
			// wid:'33.333%'
			red: 'me',
			dialogTableVisible: false,
			gridData: [],
			items: [
				'year',//年
				'name',//名字
				'salarylevel',//薪级
				'ondays',//在岗天数
				'monthlypostsalary',//月
				'annualpostsalary',//年
				'supplementarysalary',//辅助工资
				'annualbonus',//年度奖金
				'deferredbonus',//延递奖金
				'currentrevenue',//当期收入
				'accrualtotal',//权责合计
				'monetaryunit'//货币单位
			],
			gridData1: [],
			lockGao: false,

		}
	},
	components: {

	},
	created: function () {
		//      	this.Axios.Post(this.URL.getEmployeeImg.url,{
		//                  emplid:this.personInfo.emplid
		//             }).then(res=>{
		//              	this.srcImg = 'data:image/png;base64,'+ res.data.message;
		//              })
	},
	methods: {
		salaryDetail: function (e) {
			let self = this
			let para = {
				emplId: this.personInfo.emplid
			}
			this.Axios.Post(this.URL.queryExSalary.url, para)
				.then(function (res) {
					self.gridData = res.data.datas.exSalarys
					for (var i = 0; i < self.gridData.length; i++) {
						//  self.gridData[i].name += self.gridData[i].payroll_type;
						self.gridData[i].name += ('(' + self.gridData[i].payroll_type + ')')
					}
				})
			this.dialogTableVisible = true
			return false
		},
		goResumeUrl () {

			let sex = this.personInfo.sex_descr == '女' ? 2 : 1
			const params = {
				emplid: this.personInfo.emplid,
				sex
			}

			window.open('/module/leaderAppoint.html?' + _encode(JSON.stringify(params)))
		},
	},
	computed: {
		srcImg: function () {

			return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + this.personInfo.emplid + '&sex=' + (this.personInfo.sex_descr === '女' ? 2 : 1) + '&token=' + localStorage.getItem('token')

		},
		ComputedEmplid: function () {
			return 'module/leaderAppoint.html?emplid=' + this.personInfo.emplid
		},
		hideLeader1: function () {
			console.log(this.hideLeader, 'hideLeader')
			return this.hideLeader ? true : false
		},
		hidePay1: function () {
			return this.hidePay ? true : false
		},
		title: function () {
			return this.personInfo.name + '-薪酬信息'
		}
	},
	filters: {
		calculateAge: function (value) {
			var year = value.split('.')[0]
			return new Date().getFullYear() - year
		},
		handleDate: function (value) {

			return value.split(' ')[0]
		}
	},
	props: {
		width: {
			type: String,
			default: '33.333%'
		},
		personInfo: {
			type: Object,
			default: ''
		},
		hideLeader: {
			type: Number,
			default: 0
		},
		hidePay: {
			type: Number,
			default: 0
		},
		type: {
			type: String,
			default: 'leader'
		}
	},
	watch: {
		widt: function () {
			console.log('watch', this.widt)
			console.log(this.red, 'tell me color')
		}
	}
}
</script>
<style scoped>
.card-leader {
  min-height: 1px;
  float: left;
  color: #333;
  background-color: #fff;
  padding-right: 10px;
  padding-left: 10px;
}
.card-inner {
  width: 100%;
  position: relative;
  margin: 10px auto;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.backwork {
  /*line-height:50px;*/
  height: 50px;
  overflow: hidden;
  /*white-space: nowrap;*/
}

/*个人信息区域样式 start*/
.card-leader .personTotal {
  cursor: pointer;
  margin-bottom: 20px;
  height: 186px;
}
.card-leader div.backLeader {
  height: 240px;
}
.card-leader .personInfo {
  float: left;
  width: 69%;
  padding-left: 4%;
}
.card-leader .personInfo .job {
  margin-bottom: 5px;
  max-height: 60px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.iconfont {
  width: 20px;
  display: inline-block;
}
.card-leader .name {
  font-size: 24px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.1;
}
.card-leader .width-nochange {
  /*max-width: 237px;*/
  min-width: 223px;
}

.card-leader li {
  line-height: 25px;
  color: #333;
}
.card-leader li .fa {
  width: 20px;
}
.card-leader .personImg {
  float: left;
  width: 31%;
  padding: 20px 5px;
}
.card-leader .cardPhoto {
  /*margin-left:5px;*/
  width: 120px;
  height: 167px;
  border-radius: 50%;
  max-width: 100%;
  vertical-align: middle;
}
/*个人信息区域样式 end*/

/*按钮区域样式 start*/
.card-leader .btnArea {
  background: #f2f5f7;
  padding: 12px 0;
  border-top: 1px solid #e6e9ed;
  text-align: center;
  height: 44px;
}
.card-leader .btn {
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
}
.card-leader .btnArea .btn-leaderInfo {
  color: #fff;
  background-color: #3c8dbc;
  border-color: #204d74;
}
.card-leader .btnArea .btn-leaderInfo:hover {
  background-color: #367fa9;
  cursor: pointer;
}
.card-leader .btnArea .btn-leaderSalary {
  color: #fff;
  margin-left: 8px;
  background-color: #00c0ef;
  border-color: #00acd6;
}
.card-leader .btnArea .btn-leaderSalary:hover {
  background-color: #00acd6;
  cursor: pointer;
}
/*按钮区域样式 end*/
</style>
<style>
.card-leader .el-dialog--small {
  width: 64%;
}
.card-leader .el-table .gutter {
  display: none;
}
.card-leader .salaryRecord {
  margin-top: 20px;
}
/*.card-leader .el-dialog--small {
        width: 64%;
        
    }*/
.card-leader .el-dialog {
  position: relative;
  left: 0;
  margin: auto;
  transform: translateX(0);
  -ms-transform: translateX(0);
}
.card-leader .el-dialog__header {
  width: 98%;
}
.card-leader .el-dialog__body {
  padding-left: 20px;
  padding-right: 25px;
}
.card-leader .el-dialog__body .box-body {
  padding-left: 5px;
}
/*高管薪资*/
.card-leader .box-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  padding: 10px;
  background-color: #fff;
}
/* table {
      border-spacing: 0;
      border-collapse: collapse;
  } */
.card-leader .table-bordered {
  border: 1px solid #ebebeb;
  width: 100%;
}
/*td*/
.card-leader .table > tbody > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  background-color: #fff;
}
.card-leader .bbq td {
  background-color: #fff !important;
}
.card-leader tbody > tr > td {
  border: 1px solid #e7e7e7;
}
.card-leader .table td {
  box-sizing: border-box;
}
.card-leader .table > tbody > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  background: #f5f5f6;
}
</style>



